<template>
  <div>
    <p class="p1">我是通过脚手架生成的第一个组件</p>
    <button v-for="item in list" :key="item">{{item}}</button>
    <!-- 当作普通标签使用 -->
    <!-- 父传子，属性=属性值；如果希望传递变量，要加v-bind -->
    <!-- <son1
      :info1="msg"
      info2="好好学习"
      :info3="list"
      info4="晚上吃什么"
      :info5="obj1"
      :info6="msg2"
    ></son1>
    <son2 @post="getData"></son2> -->
    <son3></son3>
    <son4></son4>
    <v-slot>
      <h1 slot="mid">666</h1>
      <mark slot="top">666</mark>
      <template slot-scope="scope">
        <button>{{scope.item}}</button>
      </template>
    </v-slot>
    <son5></son5>
    <v-ref></v-ref>
    <button @click="change">修改数据1</button>
  </div>
</template>

<script>
// 引入子组件
// import son1 from './Son1.vue'
// import son2 from './Son2.vue'
import son3 from './Son3.vue'
import son4 from './Son4.vue'
import son5 from './Son5.vue'
import vSlot from './Slot.vue'
import vRef from './Ref.vue'
export default {
  data() {
    return {
      list: ['a', 'b', 'c'],
      msg: 'hello',
      msg2: '干饭',
      obj1: {
        name: 'Tom',
        age: 19
      }
    }
  },
  // 局部注册
  components: {
    // son1,
    // son2
    son3,
    son4,
    son5,
    vSlot,
    vRef
  },
  methods: {
    change() {
      this.msg = 'hi~';
      this.obj1.age = 20;
    },
    // 获取子传父的数据
    getData(val1, val2) {
      console.log(val1);
      console.log(val2);
    }
  }
}
</script>

<style>
  .p1 {
    color: red;
    font-size: 60px;
  }
</style>